import { Global } from "../../Game/info/Global";
import MusicManager from "../../MusicManager";
import Scene from "../../Scene";
import { MoveInfo, SceneState, TButton, TLayout } from "../../SceneControl";
import MainControl from "./MainControl";

const { ccclass, property, menu } = cc._decorator;

@ccclass
@menu("Scene/RoleListScene")
export default class RoleListScene extends Scene {
    allToggles: cc.Toggle[];

    protected onLoad(): void {
        this.allToggles = this.node.getComponentsInChildren(cc.Toggle).filter(toggle => toggle.node.name == "btn_grey");
        this.allToggles.forEach(toggle => {
            toggle.node.on("toggle", this.onRoleChange, this)
        })
    }

    protected onEnable(): void {
        super.onEnable();
        this.initScene();
    }

    onRoleChange(selfToggle: cc.Toggle) {
        MusicManager.instance.play(MusicManager.instance.btnMove);
        let index = this.allToggles.findIndex(toggle => toggle == selfToggle);
        for (let i = 0; i < this.allToggles.length; i++) {
            this.allToggles[i].node.getChildByName("img_selectting").active = i == index;
        }

        cc.find("Canvas").getComponent(MainControl).setRole(Global.gameInfo.roleId = index)

        let parentToggle = selfToggle.node.parent.parent.getComponent(cc.Toggle);
        if (!parentToggle.isChecked) {
            parentToggle.check();
        }
        Global.saveGameInfo();
    }

    public initScene() {
        let upLayout = new TLayout("upLayout");
        let downLayout = new TLayout("downLayout");

        let onCheck = (para: MoveInfo) => {
            para.targetBtn.node.getComponent(cc.Toggle).check();
            this.refreshDownLayout();
        }
        upLayout.buttonList = [
            this.node.children.map(item => {
                let tbtn = new TButton(item);
                tbtn.addBeforeFingerInEvent(onCheck);
                return tbtn;
            })
        ];
        let parentToggle = this.allToggles[Global.gameInfo.roleId].node.parent.parent.getComponent(cc.Toggle);
        let toggleNode = parentToggle.node;
        let index = this.node.children.findIndex(item => item == toggleNode);
        parentToggle.check();
        upLayout.site.line = index;

        this.allToggles[Global.gameInfo.roleId].node.emit("toggle", this.allToggles[Global.gameInfo.roleId])
        downLayout.buttonList = this.getDownLayoutbtns();
        downLayout.site.line = downLayout.buttonList[0].findIndex(but => but.node.getComponent(cc.Toggle) == this.allToggles[Global.gameInfo.roleId])

        this.tscene.addLayout(upLayout);
        this.tscene.addLayout(downLayout, { row: 1, line: 0 });
        this.tscene.onBack = () => {
            this.tscene.sceneState = SceneState.stop;
            this.tscene.apply();
            cc.tween(this.node)
                .to(0.25, { y: -543 })
                .set({ active: false })
                .call(() => this.node.destroy())
                .start();
        }
        this.tscene.joinController();
    }

    refreshDownLayout() {
        let downLayout = this.tscene.findLayoutByName("downLayout");
        downLayout.buttonList = this.getDownLayoutbtns();
        this.tscene.apply();
    }

    getDownLayoutbtns() {
        let checkmark: cc.Node = null;
        for (let i = 0; i < this.node.children.length; i++) {
            let temp = this.node.children[i].getChildByName("checkmark");
            if (temp.active) {
                checkmark = temp;
                break;
            }
        }
        let roleRow = checkmark.children.map(node => new TButton(node));
        return [roleRow]
    }
}
